<template>
    <!-- 头像 -->
    <div>
        <!-- 头像可以点击查看名片弹框 -->
        <el-popover :width="280" placement="right-start" :show-arrow="false" trigger="click" transition="none"
            :hide-after="0" @show="getUserInfo" ref="popoverRef">
            <!-- 头像 -->
            <template #reference>
                <AvatarBase :userId="userId" :width="width" :borderRadius="borderRadius" :showDetail="false">
                </AvatarBase>
            </template>
            <template #default>
                <div class="popover-user-panel">
                    <!-- 弹出的窗口复用搜索结果的组件 -->
                    <UserBaseInfo :userInfo="userInfo"></UserBaseInfo>
                    <!-- 发送消息/添加好友的按钮 -->
                    <div class="op-btn" v-if="userId !== userInfoStore.getUserInfo().userId">
                        <el-button v-if="userInfo.contactStatus == 'FRIENDS'" type="primary"
                            @click="sendMessage">发送消息</el-button>
                        <el-button v-else type="primary" @click="addContact">添加好友</el-button>
                    </div>
                </div>
            </template>
        </el-popover>
        <SearchAdd ref="searchAddRef"></SearchAdd>
    </div>
</template>

<script setup>
import AvatarBase from "@/components/AvatarBase.vue";
import { ref, reactive, getCurrentInstance, nextTick } from "vue"
const { proxy } = getCurrentInstance();
import { useUserInfoStore } from "@/stores/UserInfoStore"
const userInfoStore = useUserInfoStore();

const props = defineProps({
    userId: {  // 群聊或者用户都是userId
        type: String,
    },
    width: {
        type: Number,
        default: 40,
    },
    borderRadius: {
        type: Number,
        default: 0,
    },
})

const userInfo = ref({})

/* 点击头像展示名片时需要获取信息 */
const getUserInfo = async () => {
    userInfo.value.userId = props.userId
    if (userInfoStore.getUserInfo().userId == props.userId) {
        // 点击的是自己的头像，直接复用store中的信息
        userInfo.value = userInfoStore.getUserInfo()
    }
    else {
        // 点击的是别人的头像，需要发送请求获取信息
        let result = await proxy.Request({
            url: proxy.Api.getContactBasicInfo,
            params: {
                contactId: props.userId
            },
            showLoading: false
        })
        if (!result) {
            return;
        }
        userInfo.value = Object.assign({}, result.data)
    }
}

import { useRouter } from "vue-router";
const router = useRouter();

const emit = defineEmits(['closeDrawer'])

const popoverRef = ref(null)

const sendMessage = () => {
    // 关闭所有可能的弹框
    popoverRef.value.hide()  // 自己的弹框
    emit('closeDrawer')  // 群聊成员详情的弹框，见ChatGroupDetail.vue
    // 去到聊天界面
    router.push({
        path: "/chat",
        query: {
            chatId: props.userId,
            timestamp: new Date().getTime()  // 加上时间戳，因为需要其他组件监听变化的，只有userId可能路由没变化
        }
    })
}

import SearchAdd from "../views/contact/SearchAdd.vue";
const searchAddRef = ref(null)

const addContact = () => {
    // 关闭所有可能的弹框
    popoverRef.value.hide()  // 自己的弹框
    emit('closeDrawer')  // 群聊成员详情的弹框，见ChatGroupDetail.vue
    // 弹出添加好友的框
    searchAddRef.value.show({
        contactId: props.userId,
        contactType: "USER"
    })
}
</script>

<style lang="scss" scoped>
.op-btn {
    text-align: center;
    border-top: 1px solid #eaeaea;
    padding-top: 10px;
}
</style>
